<template>
  <div class="error-404">
    <div class="body">
      <h1>404</h1>
      <p>海面雾气太大,受天气影响，该页面无法正常显示.</p>
      <p>您可以 <a href="/">返回首页</a></p>
      <img src="/static/images/404.png" alt />
    </div>
  </div>
</template>

<style>
html,
body {
  height: 100%;
  width: 100%;
  background-color: #f7f7f7;
}
.error-404 {
  text-align: center;
}
.error-404 .body {
  position: absolute;
  top: 40%;
  width: 100%;
  transform: translate(0, -50%);
}
.error-404 .body h1 {
  font-size: 80px;
  font-family: '宋体';
  margin-bottom: 10px;
}
.error-404 .body p {
  font-size: 16px;
  color: #333;
  line-height: 25px;
}
.error-404 .body a {
  color: #4a90e6;
}
.error-404 .body img{
  margin-top: 100px;
}
</style>